import {Button, message} from 'antd';
import {useMount, useRequest} from 'ahooks';

import React, {useRef, useState} from 'react';
import {PlusOutlined} from '@ant-design/icons';
import ProTable, {ProColumns} from '@ant-design/pro-table';
import {BetaSchemaForm, ProFormColumnsType, ProFormInstance} from '@ant-design/pro-form';

import {editDrivingLanguage, findByDrivingLanguageList} from '@/services/ant-design-pro/Driving';
import {defaultPagination, paginationTool} from '@/utils/util';

const columnDialog: ProFormColumnsType<API.DrivingLanguage>[] = [
  {
    title: '基本信息',
    valueType: 'group',
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        initialValue: 0,
        hideInForm: true,
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 'md',
      },
      {
        title: '关键字',
        dataIndex: 'isKey',
        width: 'md',
      },
      {
        title: '排水',
        dataIndex: 'sort',
        width: 'md',
      },
    ],
  },
];

const cloneTbale = () => {
  const formRef = useRef<ProFormInstance> ();

  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const column: ProColumns<API.DrivingLanguage>[] = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      valueType: 'indexBorder',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 'md',
    },
    {
      title: '关键字',
      dataIndex: 'isKey',
      width: 'md',
    },
    {
      title: 'isView',
      dataIndex: 'isView',
    },
    {
      title: '排水',
      dataIndex: 'sort',
    },
    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_, row, index, action) => [
        <a
          key="link"
          onClick={(a) => {
            console.log ( row );
            editDialogInfo ( row, index );
          }}
        >
          编辑
        </a>,
      ],
    },
  ];
  const [editDialg, setEditDialg] = React.useState ( false );
  const [dataInfo, setDataInfo] = useState<API.DrivingLanguage> ();
  const {
    run: fetchByDataList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByDrivingLanguageList, {
    debounceWait: 100,
    manual: true,
  } );

  function editDialogInfo(row: API.DrivingLanguage, index: number) {
    setDataInfo ( row );
    formRef?.current?.setFieldsValue ( row );
    setEditDialg ( true );
  }

  function openEditDialg() {
    setDataInfo ( {isKey: '', isView: true, name: '', sort: 0, id: 0} );
    formRef.current?.resetFields ();
    setEditDialg ( true );
  }

  useMount ( async () => {
    fetchByDataList ();
  } );

  return (
    <div>
      <BetaSchemaForm<API.DrivingLanguage>
        formRef={formRef}
        initialValues={dataInfo}
        onCancel={() => setEditDialg ( false )}
        onVisibleChange={setEditDialg}
        title="字典管理"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialog}
        onFinish={async (values) => {
          values.id = dataInfo.id;
          console.log ( values );
          return new Promise<Boolean> ( (resolve, reject) => {
            editDrivingLanguage ( values )
              .then ( () => {
                message.success ( '操作成功' );
                setEditDialg ( false );
                refresh ();
                resolve ( true );
              } )
              .catch ( () => {
                message.success ( '操作失败' );
                reject ( false );
              } );
          } );
        }}
      />
      <ProTable<API.DrivingLanguage>
        search={false}
        toolBarRender={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields ();
              openEditDialg ();
            }}
            key="button"
            icon={<PlusOutlined/>}
            type="primary"
          >
            新建
          </Button>,
        ]}
        onDataSourceChange={(d) => {
          console.log ( 'onDataSourceChange', d );
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log ( 'onDataSourceChange', d );
        }}
        dataSource={dataList?.data?.list}
        loading={loading}
        pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
          setPagination ( data1 );

          fetchByDataList ( {...pagination} );
        } )}
        columns={column}
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
